<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-23 10:08:34
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-25 09:49:59
 * @FilePath: \cxl-h5\src\components\NoOrder.vue
-->
<template>
    <section class="none">
        <section>
            <img src="../assets/images/icon_zwddjl@3x.png" alt="" srcset="" />
            <p>{{ describe }}</p>
            <cxl-button type="primary" round @click="onClick">{{ text }}</cxl-button>
        </section>
    </section>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
//接收父级传递的参数
const props = defineProps(['describe', 'buttonText'])
//注册父级回调
const emits = defineEmits(['touch'])

const text = ref('')

const describe = ref('')

watchEffect(() => {
    text.value = props.buttonText
    describe.value = props.describe
})

const onClick = () => {
    emits('touch')
}
</script>

<style scoped lang="scss">
.none {
    height: calc(100vh - var(--cxl-size-40) - var(--cxl-size-40) - var(--cxl-size-40));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 6.4rem;
    box-sizing: border-box;
    flex-wrap: wrap;
    padding-bottom: calc(var(--cxl-size-12) + var(--cxl-size-40));
    > section {
        width: 100%;
        text-align: center;
    }
    img {
        display: block;
        width: 8.4rem;
        margin: auto;
    }
    p {
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-999999);
        margin: var(--cxl-size-18) 0;
    }
}
</style>
